<!-- 好友评论 -->
{% extends "base.html" %}
{% block title %}好友评论{% endblock %}
{% block content %}

    <!-- Breadcome start-->
<div class="breadcome-area mg-b-30 small-dn">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcome-list shadow-reset">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="breadcome-heading">
                                <form role="search" class="">
                                    <input type="text" placeholder="Search..." class="form-control">
                                    <a href=""><i class="fa fa-search"></i></a>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <ul class="breadcome-menu">
                                <li><a href=" ">好友评论</a> <span class="bread-slash">/</span>
                                </li>
                                <li><span class="bread-blod">评论区</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcome End-->

    <div class="row" style="padding-top: 20px">
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2">
                    <div class="contact-client-img">
                        <img id="avatarimg" src="/static/uploadfiles/A.jpg" width="100" height="100" alt="" style="border: solid">
                    </div>
                </div>
                <div class="col-md-9" style="padding-top: 20px">
                    <div class="panel panel-warning">
                        <div class="panel-heading" style="background-color: #ff9176;color: black">
                            <a href="#">小橘</a>
                            ：在新冠疫情面前，你们灯火如昼地工作，直到彻夜通宵，也决不喊倒下。勇者们，奥利给！！！
                        </div>
                        <div class="panel-footer"style="color: #ff9176">60名公安民警和35名辅警牺牲维护一线稳定......【<a href="#">查看原文</a>】</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    <div class="col-md-10">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2">
                    <div class="contact-client-img">
                        <img id="avatarimg" src="/static/uploadfiles/B.jpg" width="100" height="100" alt="" style="border: solid">
                    </div>
                </div>
                <div class="col-md-9" style="padding-top: 20px">
                    <div class="panel panel-warning">
                        <div class="panel-heading" style="background-color: #ff7ba2;color: black">
                            <a href="#">小红</a>
                            ：天行健，君子以自强不息，地势坤，君子以厚德载物。这些年轻人必须点个赞！
                        </div>
                        <div class="panel-footer"style="color: #ff7ba2">疫情面前，一位一线人民教师的选择......【<a href="#">查看原文</a>】</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    <div class="col-md-10">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2">
                    <div class="contact-client-img">
                        <img id="avatarimg" src="/static/uploadfiles/C.jpg" width="100" height="100" alt="" style="border: solid">
                    </div>
                </div>
                <div class="col-md-9" style="padding-top: 20px">
                    <div class="panel panel-warning">
                        <div class="panel-heading" style="background-color: #ff67ca;color: black">
                            <a href="#">小粉</a>
                            ：他们从火海中出，他们不怕烈火焚身，只怕祖国的一寸土地被燃烧的烈火“侵犯”。
                        </div>
                        <div class="panel-footer"style="color: #ff67ca">森林消防员的疫情防控......【<a href="#">查看原文</a>】</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    <div class="col-md-10" style="text-align: center">
        <nav>
            <ul class="pagination">

                <li class="disabled">
                    <a href="#">
                        <span>«</span>
                    </a>
                </li>
                        <li class="active"><a href="?page=1">1</a> </li>
                        <li><a href="?page=2">2</a> </li>
                        <li><a href="?page=3">3</a> </li>
                        <li><a href="?page=4">4</a> </li>
                    <li>
                        <a href="?page=2">
                            <span>»</span>
                        </a>
                    </li>
            </ul>
        </nav>
    </div>
    </div>

{% endblock %}